<template>
	<view class="container">
		<!-- <view><uni-easyinput class="uni-mt-5" suffixIcon="search" placeholder="输入关键词搜索" @iconClick="iconClick"></uni-easyinput></view> -->
		<view class="list">
			<view @click="changeSelect(index)" v-for="(item,index) in peopleList" :key="index">
				<Peoplecard :people_id="item.people_id" :avatur="item.avatur" :name="item.name" :gender="item.gender" :address="item.address" :selected="item.selected"></Peoplecard>
			</view>
		</view>
		<view class="bottom">
			<view @click="queren()" class="button">确定</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import {ref,reactive,onBeforeMount} from "vue"
	import Peoplecard from "@/pages/feed/components/peoplecard.vue"
	import http from "@/utils/request.js"
	onBeforeMount(()=>{
		getpeople()
	})
	
	let peopleList=ref()
	
	function getpeople(){
		let response=http.get('/people/getpeoples',{service_id:1})
		response.then(res=>{
			if(res.data.code===200){
				peopleList.value=res.data.data
				peopleList.value.forEach((item)=>{
					item.selected=false;
				})
			}
		})
	}
	function changeSelect(index){
		peopleList.value.forEach((item)=>{
			item.selected=false;
		})
		peopleList.value[index].selected=true;
	}
	function queren(){
		peopleList.value.forEach((item)=>{
			if(item.selected){
				uni.$emit('receivepeople',item)
			}
			uni.navigateBack()
		})
	}
</script>

<style lang="scss">
	.container{
		width: 100%;
		display: flex;
		padding-top: 40rpx;
		justify-content: center;
		
		.list{
			width: 90%;
		}
		
		.bottom{
			position: fixed;
			bottom: 0;
			width: 100%;
			height: 120rpx;
			box-shadow: 0 -12rpx 64rpx -14rpx rgba(0, 0, 0, 0.15);
			background-color: #ffffff;
			display: flex;
			align-items: center;
			justify-content: center;
			
			.button{
				background-color: #f8e177;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #090300;
				letter-spacing: 0.2em;
				width: 90%;
				height: 70%;
				border-radius: 50rpx;
				
				&:active{
					opacity: 0.7;
				}
			}
		}
	}
</style>
